<div mat-dialog-title>
	<h3>Create database in {{ server.name }}</h3>
	<button aria-label="close dialog" mat-dialog-close mat-icon-button>
		<span class="material-symbols-outlined notranslate">close</span>
	</button>
</div>
<div
	(keyup.enter)="(name.value && nameValid(name.value)) ? createDb(name.value) : undefined"
	mat-dialog-content
	style="display: flex; flex-direction: column; text-align: center;">
	<mat-form-field appearance="fill" style="padding: 20px 20px 0px 20px; flex: 1">
		<mat-label>Database Name</mat-label>
		<input #name
			   autocomplete="off"
			   cdkFocusInitial
			   matInput
			   required>
	</mat-form-field>
	<mat-error
		*ngIf="name.value && !nameValid(name.value)">
		Name already taken or containing special characters
	</mat-error>
</div>
<mat-dialog-actions>
	<button
		(click)="createDb(name.value)"
		[disabled]="!name.value || !nameValid(name.value) || isLoading"
		color="primary"
		mat-raised-button>
		Create
	</button>

	<mat-spinner
		*ngIf="isLoading"
		[diameter]="30"
		color="primary"
	></mat-spinner>
</mat-dialog-actions>
